<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@	taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:url var="edit_queryPage" value="/tableField/queryPage.do" />

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>插入表记录页的表单</title>
	<link rel="stylesheet" type="text/css" href="../common/easyui/themes/metro-green/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../common/easyui/themes/icon.css" />
	<script type="text/javascript" src="../common/easyui/jquery.min.js"></script>
	<script type="text/javascript" src="../common/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../common/common.js"></script>
	<script type="text/javascript" src="../common/system.js"></script>
	<style type="text/css">
		html, body {
			height: 100%;
			padding: 0;
			margin: 0;
		}
	</style>
</head>

<body>
<!-- 表格 -->
<div id="dg_editTableData"></div>
<!-- 表格上的工具栏 -->
<div id="toolbar_editTableData" style="padding-left:5px; height:30px;">
	<div style="margin-bottom: 5px;">
		<a href="javascript:endEdit('dg_editTableData', enableExecute);" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true">完成</a>
		<a href="javascript:reject('dg_editTableData');" class="easyui-linkbutton" data-options="iconCls:'icon-arrow-undo',plain:true">清空</a>
		<a href="javascript:saveTableData();" class="easyui-linkbutton" data-options="iconCls:'icon-execute',plain:true,disabled:true">执行</a>
	</div>
</div>

<!-- JS脚本 -->
<script type="text/javascript">
// 存放主键信息
var pkName = '';
var pkValue = '';
$(function(){
	// 初始化表格，并设置默认值（如果为修改操作的话）
	$.ajax({
		type : 'post',
		url : '${edit_queryPage}',
		data : {
			serverName:loc[0],
			databaseName:loc[1],
			tableName:loc[2]
		},
		dataType : 'json',
		success : function(data){
			// 开启表格的单元格编辑功能
			$('#dg_editTableData').datagrid().datagrid('enableCellEditing');
			$('#dg_editTableData').datagrid({
				fitColumns : true,
				fit : true,
				border : false,
				rownumbers : true,
				nowrap : false,
				striped : true,
				singleSelect : true,
				toolbar : '#toolbar_editTableData',
				columns : [[
					{field:'COLUMN_NAME', title:'字段', width:50},
					{field:'COLUMN_TYPE', title:'类型', width:80},
					{field:'IS_NULLABLE', title:'空', width:30},
					{field:'COLUMN_KEY', title:'键', width:30},
					{field:'COLUMN_DEFAULT', title:'值', width:120, editor:'text', styler:valueCellStyler},
					{field:'EXTRA', title:'额外', width:100}
				]],
				onClickRow : function(rowIndex, rowData){
					// 如果执行按钮可用，则设置为不可用
					if(!$('#toolbar_editTableData a:eq(2)').linkbutton('options').disabled){
						disableLinkBtn($('#toolbar_editTableData a:eq(2)'));
					}
				}
			});
			// 如果为修改操作，则
			// 1:设置该条记录的默认值
			// 2.保存主键那行映射
			if(url_type == 'modify'){
				// step1
 				var selectedRow = $.parseJSON('${selectedRow}');
				for(var i in data['rows']){
					data['rows'][i].COLUMN_DEFAULT = selectedRow[(data['rows'][i].COLUMN_NAME).toUpperCase()];
				}
				// 载入数据
				$('#dg_editTableData').datagrid('loadData',data);
				// step2
				var rows = $('#dg_editTableData').datagrid('getRows');
				for(var i in rows){
					if(rows[i].COLUMN_KEY == 'PRI'){
						pkName = rows[i].COLUMN_NAME;
						pkValue = rows[i].COLUMN_DEFAULT;
					}
				}
			} else{
				// 载入数据
				$('#dg_editTableData').datagrid('loadData',data);
			}
		}
	});
});

// 保存表记录
function saveTableData(){
	// 获取列名和对应值，封装成json对象，传到后台
	var rows = $('#dg_editTableData').datagrid('getChanges');
	if(rows.length == 0){
		disableExecute();
		return;
	}
	var jsonData = {};
	var key = '';
	var value = '';
	jsonData["serverName"]=loc[0];
	jsonData["databaseName"]=loc[1];
	jsonData["tableName"]=loc[2];
	jsonData["pkName"]=pkName;
	jsonData["pkValue"]=pkValue;
	for(var i in rows){
		key = "keys[" + i + "]";
		value = "values[" + i + "]";
		jsonData[key] = rows[i].COLUMN_NAME;
		jsonData[value] = rows[i].COLUMN_DEFAULT;
	}
	// 发送AJAX请求
	$.ajax({
		type : 'post',
		url : url_edit,
		data : jsonData,
		dataType : 'json',
		success : function(data){
			if(data.success){
				$.messager.alert('成功', data.message + "受影响行数为：" + data.data);
				closeDialog('dialog_tableData');
				// 重新载入当前表格
				reload(initTableDataGrid);
			} else{
				$.messager.alert("失败", data.message + "<br>" + data.data);
			}
		}
	});
}

// 使执行按钮可用
function enableExecute(){
	enableLinkBtn($('#toolbar_editTableData a:eq(2)'));
}

//使执行按钮不可用
function disableExecute(){
	disableLinkBtn($('#toolbar_editTableData a:eq(2)'));
}
</script>
</body>
</html>